<template>
  <div class="search">
    <div class="search-form">
      <input v-model="keywords" type="text" placeholder="搜职位、搜公司..." @keyup.enter="toSearch">
      <button @click="toSearch">搜索</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'search',
  data () {
    return {
      keywords: '',
    }
  },
  created () {
    this.keywords = this.$route.query.keywords || '';
  },
  mounted () {
  },
  methods: {
    toSearch () {
      this.keywords = this.keywords.trim();
      this.$router.push({
        path: 'job',
        query: {
          keywords: this.keywords
        }
      })
    },
  },
  components: {},
}
</script>

<style lang="stylus" scoped>
.search
  height 75px
  width 100%
  background #f6f7f8
  display flex
  align-items center
  justify-content center

  .search-form
    height 35px
    width 284px
    position relative

    input
      height 100%
      width 100%
      padding 0 60px 0 20px
      border-radius 17.5px
      border 0

    button
      position absolute
      right 0
      top 0
      height 35px
      width 60px
      background transparent
      color $color-main

</style>
